<template>
	<div class="sensitivewords">
		<el-dialog title="" :visible.sync="pageIsShow" width="350px" center :destroyOnClose='true'
			:modal-append-to-body="false" @closed="handleClosed">
			<div class="contentBox">
				<div>是否存在敏感词:
					<i v-show="!isInclude" style="color: #3a8ee6;">不存在</i>
					<i v-show="isInclude" class="color-error">存在</i>
				</div>
				<div v-html="highlightedText" class="stateContent marginT15"></div>
			</div>
		</el-dialog>
	</div>
</template>
<!-- 使用前端检测 过于消耗流量  升级后端处理 -->
<script>

	import {
		sensitiveWordsHandled
	} from "@/api/sensitivewords";
	export default {
		data() {
			return {
				pageIsShow: false, //页面显示
				contentText: '', // 用户输入的文本
				highlightedText: '', // 高亮显示后的文本
				isInclude: false, //是否存在敏感词
				code: "sensitiveWords", //数据库查询敏感词列表code
				sensitiveWords: [], // 示例敏感词列表
			};
		},
		mounted() {
			
		},
		methods: {
			initData(obj) {
				this.pageIsShow = true;
				let {
					code,
					selectValue,
					contentText
				} = obj
				this.stateId = code
				this.selectValue = selectValue
				this.contentText = contentText
				this.nodeHandled();
			},
			//关闭
			handleClosed() {
				this.pageIsShow = false;
			},
			//后端处理
			nodeHandled(){
				this.isInclude = false;
				this.highlightedText =""
				if(!this.contentText){
					return
				}
				sensitiveWordsHandled({value:this.contentText}).then(data=>{
					if(data.status){
						this.isInclude = data.status;
						this.highlightedText = data.highlightedText;
					}
				}).catch(err=>{
					this.highlightedText ="出错啦";
				})
			},
			//前端处理
			detectSensitiveWords() {
				let foundSensitiveWord = false;
				try {
					this.sensitiveWords.forEach(word => {
						const regex = new RegExp(`(${word})`, 'gi');
						if (regex.test(this.contentText)) {
							foundSensitiveWord = true;
						}
						this.highlightedText = this.contentText.replace(regex,
							'<span style="color: red;">$1</span>');
						if (foundSensitiveWord) {
							throw new Error("find");
						}
					});
				} catch (error) {}
				this.isInclude = foundSensitiveWord;
			}
		}
	};
</script>

<style scoped>
	/* 返回的按钮 */
	.goBackButtonBox {
		font-size: 24px;
		font-weight: 500;
		display: inline-block;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		padding: 0 20px;
		z-index: 22;
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: left;
		background-color: #fff;
	}

	.goBackButtonBox .item {
		width: 50px;
	}

	.contentBox {
		width: 100%;
		margin: 30px 0 80px 0;
		padding: 0 5px;
		box-sizing: border-box;
		text-align: left;
		overflow: hidden;
	}

	.stateContent {
		width: calc(100% - 10px);
		white-space-collapse: preserve-breaks;
		white-space: pre-line;
		border-radius: 8px;
		height: auto;
		max-height: 52vh;
		overflow-y: auto;
		padding: 2px;
		background-color: #d9ffff;
	}
	
	.sensitivewords :deep(.el-dialog) {
		width: 85%;
		min-width: 85% !important;
		height: auto;
		max-height:  calc(100% - 150px);
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		border-radius: 8px;
	}
</style>